<template>
	<div class="diy_list page_homestay_information" id="homestay_information_list">
		<div class="warp">
			<div class="container diy_list_container">
				<div class="diy_list_title">
					<div class="col">
						<span class="title">民宿信息列表</span>
					</div>
				</div>
				<div class="leis_box">
				<div class="iudis_box">
          <div class="row diy_list_search">
            <div class="col">
              <!-- 搜索栏 -->
              <div class="view Search">
                <span class="diy_list_search_title">关键字搜索：</span>
                <b-form-input size="sm" class="mr-sm-2" placeholder="民宿类型搜索" v-model="query['types_of_homestays']" />
                <b-form-input size="sm" class="mr-sm-2" placeholder="停车场搜索" v-model="query['parking']" />
                <b-form-input size="sm" class="mr-sm-2" placeholder="民宿位置搜索" v-model="query['location_of_homestay']" />
                <b-form-input size="sm" class="mr-sm-2" placeholder="能否做饭" v-model="query['is_cook']" />
                <b-form-input size="sm" class="mr-sm-2" placeholder="能否带宠物" v-model="query['pet']" />
                <b-button size="sm" @click="search()" >
                  <b-icon icon="search"/>
                </b-button>
              </div>
              <!-- /搜索栏 -->
            </div>
				</div>
				<div class="diy_list_select_box">
					<span class="diy_list_select_title">下拉搜索：</span>
						<div class="diy_list_dropdown_box">
						<div class="col">
							<!-- 筛选 -->
							<div class="view sift">
                <b-dropdown text="能否做饭" variant="outline-dark" left>
                  <b-dropdown-item @click="filter_set('全部','is_cook')">全部</b-dropdown-item>
                  <b-dropdown-item v-for="(o,i) in cook" @click="filter_set(o,'is_cook')" >
                    {{ o }}
                  </b-dropdown-item>
                </b-dropdown>

                <b-dropdown text="能否带宠物" variant="outline-dark" left>
                  <b-dropdown-item @click="filter_set('全部','pet')">全部</b-dropdown-item>
                  <b-dropdown-item v-for="(o,i) in pet" @click="filter_set(o,'pet')" >
                    {{ o }}
                  </b-dropdown-item>
                </b-dropdown>

                <b-dropdown text="民宿类型" variant="outline-dark" left>
									<b-dropdown-item @click="filter_set('全部','types_of_homestays')">全部</b-dropdown-item>
										<b-dropdown-item v-for="(o,i) in list_types_of_homestays" @click="filter_set(o,'types_of_homestays')" >
										{{ o }}
										</b-dropdown-item>
								</b-dropdown>

                <b-dropdown text="停车场" variant="outline-dark" left>
									<b-dropdown-item @click="filter_set('全部','parking')">全部</b-dropdown-item>
										<b-dropdown-item v-for="(o,i) in list_parking" @click="filter_set(o,'parking')" >
										{{ o }}
										</b-dropdown-item>
								</b-dropdown>
																					<!-- 排序 -->

								<b-dropdown text="排序" variant="outline-dark" left>
										<b-dropdown-item v-for="(o, i) in list_sort" :key="i" @click="set_sort(o)" >
												{{ o.name }}
										</b-dropdown-item>
								</b-dropdown>

							<!--/排序 -->
							</div>
							<!-- /筛选 -->
						</div>
					</div>

				</div>
        </div>
				<div class="row diy_list_box">
					<div class="col">
						<!-- 列表 -->
              <list_homestay_information :list="list" />
            <!-- /列表 -->
					</div>
				</div>
	</div>
	<!-- 大盒子结尾 -->
				<div class="row diy_list_page_box">
					<div class="col overflow-auto flex_cc">
						<!-- 分页器 -->
<!--						<diy_pager v-model="query['page']" :size="query['size']" :count="count" v-on:toPage="toPage" v-on:toSize="toSize" ></diy_pager>-->
            <b-pagination
                v-model="query.page"
                :total-rows="count"
                :per-page="query.size"
                @change="goToPage"
            />
						<!-- /分页器 -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import list_homestay_information from "@/components/diy/list_homestay_information.vue";
	import diy_pager from "@/components/diy/diy_pager";
	import mixin from "@/mixins/page.js";

	export default {
		mixins: [mixin],
		components: {
			diy_pager,
			list_homestay_information,
		},
		data() {
			return {
				url_get_list: "~/api/homestay_information/get_list?like=0",

				// 查询条件
				query: {
					keyword: "",
					page: 1,
					size: 12,
          "types_of_homestays": "", // 民宿类型
          "parking": "", // 停车场
          "location_of_homestay": "", // 民宿位置
          "examine_state": "已通过", // 审核状态
          "is_cook":"",
          "pet":"",
          "on_sale":1,
				},
				// 排序内容
				list_sort: [{
						name: "创建时间从高到低",
						value: "create_time desc",
					},
					{
						name: "创建时间从低到高",
						value: "create_time asc",
					},
					{
						name: "更新时间从高到低",
						value: "update_time desc",
					},
					{
						name: "更新时间从低到高",
						value: "update_time asc",
					},
								{
						name: "民宿类型正序",
						value: "types_of_homestays asc",
					},
					{
						name: "民宿类型倒序",
						value: "types_of_homestays desc",
					},
								{
						name: "停车场正序",
						value: "parking asc",
					},
					{
						name: "停车场倒序",
						value: "parking desc",
					},
								{
						name: "民宿好评正序",
						value: "homestay_praise asc",
					},
					{
						name: "民宿好评倒序",
						value: "homestay_praise desc",
					},
        ],
        // 民宿类型列表
				"list_types_of_homestays": ['单人','双人','其他'],
          // 停车场列表
				"list_parking": ['有','无'],
        "cook": ['可以','不可以'],
        "pet": ['可以','不可以'],
			}
		},
		methods: {
			/**
			 * 筛选选择
			 */
			filter_set(o,key) {
			    if (o == "全部") {
			        this.query[key] = "";
			    } else {
			        this.query[key] = o;
			    }
			    this.search();
			},

			/**
			 * 排序
			 */
			set_sort(o) {
			    this.query.orderby = o.value;
			    this.search();
			},
			reset() {
        this.query.types_of_homestays = ""
        this.query.parking = ""
        this.query.location_of_homestay = ""
        this.search();
			},

			// 返回条数
			toSize(i){
				this.query.size = i;
				this.first();
			},

			// 返回页数
			toPage(i){
				this.query.page = i;
				this.first();
			},

      goToPage(v){
        this.query.page = v;
        this.goToNew(v)
      },

		},
		computed: {
		},
		created() {
    }
	}
</script>

<style>
.el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner,.el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
	width: 100%;
}
.el-date-editor .el-range-separator{
	width: 11% !important;
}
</style>
